<template>
  <div class="player">
    <Header />
    <div class="song">
      <van-icon name="arrow-left" @click="goBack" />
      <img :src="coverImg" class="song-cover" />
      <h2 class="song-tit">「{{songTitle}}」</h2>
      <h3 class="song-subtit">{{songSubtit}}</h3>
      <div class="song-info">
        <span class="song-company">唱片公司：{{songCompany}}</span>
        <span class="song-language">歌曲语种：{{songLanguage}}</span>
        <span class="song-pubtime">发行时间：{{songPubtime}}</span>
        <p class="song-profile">简介：{{songPorfile}}</p>
      </div>
      <div class="song-comment">
        <h3>{{commentTit}}</h3>
        <ul>
          <li v-for="item in hotComment" :key="item.commentid">
            <div class="user-avatar">
              <img :src="item.avatarurl" />
            </div>
            <div class="user-comment">
              <p class="user-name">{{item.nick}}</p>
              <p class="comment-time">{{timestampToTime(item.time)}}</p>
              <p class="comment-content">{{item.rootcommentcontent | ellipsis}}</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import Header from "@/components/common/Header.vue";
export default {
  components: {
    Header
  },
  data() {
    return {
      songUrl: "",
      coverImg: "",
      baseCoverUrl: "https://y.gtimg.cn/music/photo_new/T002R300x300M000",
      songInfo: [],
      songTitle: "暂无",
      songSubtit: "暂无",
      songCompany: "暂无",
      songLanguage: "暂无",
      songPubtime: "暂无",
      songPorfile: "暂无",
      hotComment: [],
      commentTit: "暂无精彩评论",
    };
  },
  created() {
    this.getSongInfo();
    this.getComment();
  },
  methods: {
    getSongInfo() {
      axios
        .get("/jsososo/song", {
          params: {
            songmid: this.$route.params.mid
          }
        })
        .then(res => {
          //   console.log(res.data.data);
          this.songInfo = res.data.data;
          if (res.data.data.track_info) {
            this.coverImg =
              "https://y.gtimg.cn/music/photo_new/T002R300x300M000" +
              res.data.data.track_info.album.mid +
              ".jpg";
            this.songTitle = res.data.data.track_info.name;
            this.songSubtit = res.data.data.track_info.subtitle;
          }
          if (res.data.data.info) {
            this.songCompany = res.data.data.info.company.content[0].value;
            this.songLanguage = res.data.data.info.lan.content[0].value;
            this.songPubtime = res.data.data.info.pub_time.content[0].value;
          }
          if (res.data.data.info.intro) {
            this.songPorfile = res.data.data.info.intro.content[0].value;
          }
          //   this.songUrl = res.data.data[this.$route.params.id];
        })
        .catch(err => {
          console.error(err);
        });
    },
    getComment() {
      axios
        .get("/jsososo/comment", {
          params: {
            id: this.$route.params.id
          }
        })
        .then(res => {
          // console.log(res.data.data);
          if (res.data.data.hotComment.commentlist) {
            this.hotComment = res.data.data.hotComment.commentlist;
            this.commentTit = "精彩评论";
          }
        })
        .catch(err => {
          console.error(err);
        });
    },
    goBack() {
      window.history.length > 1 ? this.$router.go(-1) : this.$router.push("/");
    },
    timestampToTime(timestamp) {
      timestamp *= 1000;
      const dt = new Date(timestamp);
      const y = dt.getFullYear();
      const m = (dt.getMonth() + 1 + "").padStart(2, "0");
      const d = (dt.getDate() + "").padStart(2, "0");

      const hh = (dt.getHours() + "").padStart(2, "0");
      const mm = (dt.getMinutes() + "").padStart(2, "0");
      const ss = (dt.getSeconds() + "").padStart(2, "0");

      return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
    }
  },
  //字数限制
  filters: {
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 60) {
        return value.slice(0, 60) + "...";
      }
      return value;
    }
  }
};
</script>

<style scoped>
.player {
  position: relative;
}
.song {
  padding-top: 75px;
}
.song-cover {
  height: 200px;
  border-radius: 18px;
  box-shadow: 0 7px 13px rgb(0 0 0 / 21%);
}
.van-icon {
  height: 200px;
  line-height: 200px;
  position: absolute;
  top: 75px;
  left: 0;
  z-index: 1;
  font-size: 40px;
  color: #22d59c;
  cursor: pointer;
}
.van-icon:hover {
  background: hsla(161, 72%, 48%, 0.2);
}
.song-tit {
  color: #121212;
  font-weight: normal;
  font-size: 20px;
  margin: 20px 0 15px 0;
}
.song-subtit {
  color: gray;
  font-weight: normal;
  font-size: 16px;
  margin: 15px 0;
}
.song-info {
  color: #121212;
  margin: 0;
  line-height: 30px;
  padding: 0 15px;
}
.song-company {
  font-size: 14px;
  display: block;
}
.song-language {
  font-size: 14px;
  display: block;
}
.song-pubtime {
  font-size: 14px;
  display: block;
}
.song-profile {
  font-size: 14px;
  text-align: left;
  display: block;
  line-height: 26px;
}

.song-comment {
  padding: 0 15px;
}
.song-comment h3{
  margin: 20px 0 10px 0;
}
.song-comment li {
  overflow: hidden;
  padding: 15px 0;
}
.user-avatar {
  width: 46px;
  float: left;
  padding-right: 20px;
}
.user-avatar img {
  height: 46px;
  width: 46px;
  border-radius: 100px;
}
.user-comment {
  width: calc(100% - 66px);
  float: left;
}
.user-name {
  margin: 0;
  text-align: left;
  color: #121212;
  line-height: 26px;
}
.comment-time {
  margin: 0;
  font-size: 12px;
  color: gray;
  text-align: left;
  line-height: 24px;
}
.comment-content {
  text-align: left;
  margin: 0;
  color: #121212;
  font-size: 14px;
  line-height: 24px;
}
</style>